<template>
	<view class="container-box">
		<!-- <view class="head-tabs">
			<u-tabs :list="tabList" @click="tabClick"></u-tabs>
		</view> -->
		<view class="head-tabs">

			<view class="tabs-item" :class="[i===(index-1)?'tabs-item-active':'']" v-for='(item,i) in tabList'
				:key='item.name' @click="tabClick(item,i)">
				{{item.name}}
			</view>
		</view>
		<view class="content-box">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item-box" v-for="item in listArr" :key="item.id" @click="hairCommunityClick(item)">
					<img :src="item.image ? item.image : 'https://picx.zhimg.com/v2-8d117f237079440cc59baf9ca762d29f_r.jpg?source=1940ef5c'"
						alt="" />
					<view class="right-box">
						<view class="tilte-top">{{ item.title }}</view>
						<!-- <view class="tilte-center">{{ item.content }}</view> -->
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx"><u-icon
									name="chat"></u-icon><text>{{ item.commentQuantity }}</text>
							</view>
							<view v-if="item.isLike == 'Y'" style="display: flex; font-size: 20rpx">
								<u-icon color="#e45656" name="heart-fill"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
							<view v-else style="display: flex; font-size: 20rpx">
								<u-icon name="heart"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore :status="status" /> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		recommendByLabel,
		babelList
	} from "@/api/axios/Home.js";
	export default {
		props: {

		},
		data() {
			return {
				listArr: [],
				index: 0,
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
				tabList: []
			};
		},
		methods: {
			scrolltolower() {
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					questionsOrScience({
						params: {
							openId: this.openId,
							type: 1,
							category: this.index,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.listArr = _this.listArr.concat(res.records);
						if (res.records.length > _this.pageSize) {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						} else {
							_this.status = "nomore";
						}
						console.log(_this.status);
					});
				}
			},

			tabClick(item, index) {
				this.listArr = [];
				this.index = index + 1;
				this.pageNo = 1;
				this.getList(item);
			},
			hairCommunityClick(data) {
				delete data.content;
				delete data.image;
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},

			getList(item) {
				let openId = uni.getStorageSync('openId')
				let _this = this;
				this.status = "loading";
				recommendByLabel({
					params: {
						openId: openId,
						labelName: item.name,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					_this.listArr = _this.listArr.concat(res.result.records);
					if (res.result.records.length > _this.pageSize) {
						_this.pageNo = _this.pageNo + 1;
						_this.status = "loadmore";
					} else {
						_this.status = "nomore";
					}
					console.log(_this.status);
				});
			},
		},
		mounted() {
			babelList().then(res => {
				console.log(res);
				this.tabList = res.result
				// this.getList(this.tabList[0])
				this.index = 1
			})
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>